<template>
  <div>
    <div class="hhpj-box">
      <div class="hhpj-text">
        <span>会话评价</span>
      </div>
      <div class="hhpj-text1">
        <span>邀请用户对客服进行评价，让企业客观了解自己的服务质量</span>
      </div>
      <div class="hhpj-text2">
        <span>人工客服是否解决问题</span>
      </div>
      <div class="hhpj-switch1">
        <el-switch v-model="value1" active-text="开启" inactive-text="关闭">
        </el-switch>
      </div>
      <div class="hhpj-text3">
        <span
          >开启此功能后，在人工客服满意度评价页显示是否解决问题选项，帮助统计客服解决问题的能力。</span
        >
      </div>
      <div class="hhpj-fgline1">
        <el-divider></el-divider>
      </div>
      <div class="hhpj-text4">
        <span>结束对话时系统自动邀请评价</span>
      </div>
      <div class="hhpj-switch2">
        <el-switch v-model="value2" active-text="开启" inactive-text="关闭">
        </el-switch>
      </div>
      <div class="hhpj-text5">
        <span>设置邀请评价文案</span>
      </div>
      <div class="hhpj-textbook">
        <my-textarea rows='7' width="600" ph="请对客服的服务质量做出评价"></my-textarea>
      </div>
      <div class="hhpj-button">
        <el-button type="primary" id="lzg1" size="medium">保存</el-button>
      </div>
    </div>

    <div class="hhpj-box1">
      <div class="hhpj-text6">
        <span>预览</span>
      </div>
      <div class="hhpj-text7">
        <span>请对客服的服务质量做出评价</span>
      </div>
      <div class="hhpj-pingjia">
        <el-rate v-model="value" show-text> </el-rate>
      </div>

      <div class="hhpj-textbook1">
        <my-textarea rows='7' width="351" ph="请对客服的服务质量做出评价"></my-textarea>
      </div>
      <div class="hhpj-button1">
        <el-button type="primary" id="lzg3" size="medium">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import MyTextarea from "@/components/MyInput/MyTextarea";
export default {
  components: {
    MyTextarea,
  },
  data() {
    return {
      value1: true,
      value2: true,
      textarea: "",
      textarea1: "",
      value: null,
    };
  },
};
</script>

<style>
.hhpj-box {
  width: 640px;
  height: 484px;
  background-color: #ffffff;
}
.hhpj-text {
  width: 72px;
  height: 24px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 25px;
  left: 17px;
}
.hhpj-text1 {
  width: 338px;
  height: 17px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 25px;
  left: 17px;
}
.hhpj-text2 {
  width: 140px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 50px;
  left: 17px;
}
.hhpj-switch1 {
  position: relative;
  top: 31px;
  left: 190px;
}
.hhpj-text3 {
  width: 559px;
  height: 17px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 38px;
  left: 17px;
}
.hhpj-fgline1 {
  width: 600px;
  position: relative;
  top: 40px;
  left: 17px;
}
.hhpj-text4 {
  width: 182px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 40px;
  left: 17px;
}
.hhpj-switch2 {
  position: relative;
  top: 21px;
  left: 230px;
}
.hhpj-text5 {
  width: 112px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 35px;
  left: 17px;
}
.hhpj-textbook {
  width: 600px;
  height: 160px;
  background-color: #f2f2f2;
  font-size: 13px;
  color: black;
  border-radius: 0%;

  position: relative;
  top: 45px;
  left: 15px;
}
.hhpj-button #lzg1 {
  width: 80px;
  height: 32px;
  border-radius: 0%;
  position: relative;
  top: 60px;
  left: 15px;
}

.hhpj-box1 {
  width: 392px;
  height: 484px;
  background-color: #ffffff;

  position: relative;
  top: -485px;
  left: 650px;

  overflow: hidden;
}
.hhpj-text6 {
  width: 36px;
  height: 24px;
  color: #333333;
  font-family: "PingFangHK-Regular", "PingFang HK", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 25px;
  left: 17px;
}
.hhpj-text7 {
  width: 182px;
  height: 19px;
  color: #666666;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 50px;
  left: 100px;
}
.hhpj-pingjia {
  position: relative;
  top: 100px;
  left: 120px;
}
.hhpj-textbook1 {
  width: 351px;
  height: 160px;
  font-size: 13px;
  color: black;
  border-radius: 0%;

  position: relative;
  top: 145px;
  left: 15px;
}
.hhpj-button1 #lzg3 {
  width: 80px;
  height: 32px;
  border-radius: 0%;
  position: relative;
  top: 180px;
  left: 150px;
}
</style>